<template>

  <div class="QueDetail">
      <Head></Head>
      <div class="info">

          <div class="back">
            <router-link to="/user/userQuestion">
            <span @click="backSch">返回</span>
            </router-link>
            <em>/</em>
            <span>问答交流详情</span>
          </div>

          <h1>{{queInfo.title}}</h1>
          <div class="bar">
              <ul>
                  <li>{{queInfo.pubdata}}</li>
                  <li>来源：{{queInfo.author}}</li>
                  <li>浏览:{{queInfo.view}}</li>
              </ul>
          </div>
      </div>
    <div class="content">
        <p>{{queInfo.content}}</p>
    </div>
    <div class="likeGreat">
      <!-- <li><i class="like-icon"></i><span>点赞</span></li> -->
    </div>
    <Comment :queId="queId"></Comment>
  </div>
</template>

<script>
import { getDetailQues } from '../../API/Question.js'
import head from '../head.vue'
import comments from '../comments.vue'
export default {
  name: 'questionDetail',
  props: ['queId'],
  data () {
    return {

      queInfo: {}
    }
  },
  methods: {
    getDetail () {
      // var id = parseInt(this.$route.params.queId)
      this.$nextTick(async () => {
        const { data: res } = await getDetailQues(this.queId)
        // console.log(res)
        if (res.status === 0) {
          this.queInfo = res.data[0]
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
      //   console.log(this.$route.params.schArtId)
    },
    backSch () {
      this.$emit('showQueInfo', true)
      this.$router.back(-1)
    }
  },
  created () {
    this.getDetail()
  },
  components: {
    Head: head,
    Comment: comments
  },
  watch: {
    queId (newId) {
      // this.queInfo = null
      this.queId = newId
      this.getDetail()
    }
  }
}
</script>

<style lang="less" scoped>
    li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .info{
        width: 80%;
        margin: .5rem auto;
        .back{
            float: left;
            span{
            display: inline-block;
            text-align: left;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            cursor: pointer;
            color: #999aaa;
            padding-left: .1333rem;

        }
        span:hover{
              color:#ff3535
            }
        em{
          margin: .0833rem;
        }
        }
        h1{
            text-align: center;
            padding-bottom:20px;
            font-size: .5rem;
            margin: 5px 0;

        }
        .bar{
            width: 100%;
            border-top: 1px solid  #dcdcdc;
            ul{
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 0;
                li{
                    font-size: 14px;
                    padding: 10px 20px 0 0 ;
                    color:#585858;
                }
            }
        }
    }
    .content{
        width: 70%;
        margin: 70px auto 20px;
        font-size: 18px;
        p{
            line-height: 40px;
            text-indent:1em;
        }
    }
</style>
